7. Таблицы

Создайте веб-страницу с таблицей, которая будет содержать информацию о расписании уроков на неделю. Для таблицы нужно применить стили, чтобы сделать её более эстетичной — округлить углы ячеек и изменить её внешний вид.

Шаг 1. Создаём структуру HTML

Цель: Подготовить основу страницы и создать таблицу.

  1. Открываем текстовый редактор (например, VS Code, Notepad++ или обычный Блокнот).
  2. Создаём файл с именем index.html.
  3. Внутри файла добавляем следующую основную структуру HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Расписание уроков</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h1>Расписание уроков</h1>

    <table>
        <thead>
            <tr>
                <th>День недели</th>
                <th>Предмет</th>
                <th>Время</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Понедельник</td>
                <td>Математика</td>
                <td>08:00 - 09:30</td>
            </tr>
            <tr>
                <td>Вторник</td>
                <td>История</td>
                <td>09:45 - 11:15</td>
            </tr>
            <tr>
                <td>Среда</td>
                <td>Информатика</td>
                <td>11:30 - 13:00</td>
            </tr>
            <tr>
                <td>Четверг</td>
                <td>Физика</td>
                <td>13:15 - 14:45</td>
            </tr>
            <tr>
                <td>Пятница</td>
                <td>Химия</td>
                <td>15:00 - 16:30</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

Что здесь происходит?

  • <!DOCTYPE html> — Объявляет тип документа (HTML5).
  • <head> — Секция с мета-информацией. Подключаем файл стилей styles.css.
  • <h1> — Заголовок страницы.
  • <table> — Создаёт таблицу.
  • <thead> — Заголовок таблицы с именами столбцов (День недели, Предмет, Время).
  • <tbody> — Основное содержимое таблицы с данными.
  • Каждая строка (<tr>) делится на ячейки (<td> — данные и <th> — заголовок).

Шаг 2. Создаём файл стилей CSS

Цель: Стилизовать таблицу, чтобы она выглядела красиво и имела округлённые края.

  1. Создаём файл с именем styles.css в той же папке, где находится файл index.html.
  2. Вставляем следующий код CSS:
/* Устанавливаем базовые стили для всей страницы */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    text-align: center;
    padding: 20px;
}

/* Стили для заголовка страницы */
h1 {
    margin-bottom: 20px;
    color: #555;
}

/* Основные стили для таблицы */
table {
    width: 100%;
    border-collapse: separate; /* разделяем ячейки, чтобы можно было скруглить углы */
    border-spacing: 0; /* убираем отступы между ячейками */
    background-color: #fff;
    border-radius: 12px; /* скругляем углы всей таблицы */
    overflow: hidden; /* скрываем всё, что выходит за границы скругления */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Стили для заголовков столбцов */
thead th {
    background-color: #009879;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 10px 15px;
}

/* Стили для ячеек данных */
tbody td {
    padding: 10px 15px;
    text-align: center;
    border-bottom: 1px solid #dddddd;
}

/* Последняя строка без нижней границы */
tbody tr:last-of-type td {
    border-bottom: none;
}

/* Стили для каждой строки таблицы */
tbody tr:nth-child(even) {
    background-color: #f3f3f3; /* Зебра-подсветка для чётных строк */
}

/* Стили для первой и последней ячейки в каждой строке */
tbody td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

tbody td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

Что здесь происходит?

  • Скруглённые углы:
    • Свойства border-radius указывают на скругление углов таблицы и ячеек (12px).
    • border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius — позволяют скруглить конкретные углы ячеек.
  • Цвета и фон:
    • Цвет для заголовков (#009879 — зелёный) и чётные строки (#f3f3f3 — светло-серый) улучшают читабельность.
  • Тени и стили:
    • box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) — добавляет тень для придания объёма таблице.
  • Управление пространством:
    • padding: 10px 15px — внутренние отступы внутри ячеек.
    • border-collapse: separate — отделяем ячейки, чтобы стилизовать их углы.